<div class="row">
  <div class="col">
    <div class="card">
      <div class="card-header" (click)="hidden=!hidden">
        <div class="row">
          <div class="col-1"><span class="badge" [class.badge-success]="logData.topic=='response'" [class.badge-danger]="logData.topic=='error'">{{ logData.topic }}</span></div>
          <div class="col">{{ logData.date | date : 'yyyy-MM-dd HH:mm:ss'}}</div>
          <div class="col">{{ logData.url }}</div>
          <div class="col"><button type="button" class="close" (click)="deleteMe()" data-dismiss="alert"><span>&times;</span></button>
          </div>
        </div>
      </div>
      <div class="card-body" [class.d-none]="hidden">
        <table class="table table-bordered table-hover table-sm text-monospace" style="width:300px;">
          <tr *ngFor="let pos of logData[logData['topic']] | keyvalue">
            <th>{{pos.key}}:</th><td class="text-right">{{pos.value}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>